import React from 'react';

interface FormFieldProps {
  id: string;
  label: string;
  type?: string;
  required?: boolean;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  error?: string;
}

const FormField: React.FC<FormFieldProps> = ({
  id,
  label,
  type = 'text',
  required = false,
  value,
  onChange,
  placeholder,
  error,
}) => {
  return (
    <div>
      <label htmlFor={id} className="mb-1 block text-sm font-medium text-gray-700">
        {required && '* '}
        {label}
      </label>
      <input
        id={id}
        name={id}
        type={type}
        required={required}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="bg-gray-50 relative block w-full appearance-none rounded-lg border border-gray-300 px-3 py-3 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-400 focus:outline-none focus:ring-0 sm:text-sm"
        placeholder={placeholder}
      />
      {error && (
        <div className="bg-red-50 text-red-600 mt-2 rounded-lg p-2 text-center text-sm">
          {error}
        </div>
      )}
    </div>
  );
};

export default FormField;
